<template>
  <div class="ele-drawer">
    <el-drawer :size="size" v-model="content" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <slot name="header" :close="close"></slot>
      </template>
      <slot name="content"></slot>

      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"
import { ElButton, ElDrawer } from "element-plus"
import { CircleCloseFilled } from "@element-plus/icons-vue"

// 实现双向绑定
interface IProps {
  modelValue: boolean
  size: string
}
const props = withDefaults(defineProps<IProps>(), {
  modelValue: false,
  size: "50%"
})
const emits = defineEmits(["update:modelValue"])
// content收集的文本内容
const content = computed({
  get: () => props.modelValue, // 获取是通过v-model绑定的的数据获取
  set: (val) => {
    emits("update:modelValue", val) //设置是通过v-model监听的事件进行更新
  }
})

const visible = ref(false)
</script>

<style lang="less">
.el-drawer__header {
  margin-bottom: 0px;
}
.el-drawer__body {
  overflow-y: auto;
}
.el-drawer__body::-webkit-scrollbar {
  width: 4px;
}
/* 改变滚动条轨道背景颜色 */
.el-drawer__body::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 改变滚动条滑块样式 */
.el-drawer__body::-webkit-scrollbar-thumb {
  background-color: #d2d2d2;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

.el-drawer__footer {
  padding: 0;
  text-align: left;
}
</style>
